<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>监控演示</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <style type="text/css">
      [v-cloak]{
        display: none !important;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="video-wrap">
        <div class="play-btn-group-wrap">
          <el-radio-group v-model="playerLength">
            <el-radio-button :label="item['num']" v-for="item in playerBtnGroup" :key="item['num']">{{item['name']}}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="video-inner-wrap">
          <div>
            <div class="video-player-wrap" v-for="(player, index) in players"  :key="index" v-loading="player.bLoading" element-loading-text="加载中..." element-loading-background="#000" @mousemove="resetCloseTimer(player)" @touchstart="resetCloseTimer(player)" :class="{'active': index == playerIdx, 'el-col-sm-24': playerLength == 1,'el-col-sm-12': playerLength == 4,'el-col-sm-8': playerLength == 9,'el-col-sm-6': playerLength == 16}">
              <vf-player :video-url="player.url" :controls="player.bControls" :timeout="10" @message="handleM3u8Error" :loading="player.bLoading" custom-buttons="二维码" @update:loading="updatePlayerLoading(player, $event)" @custom-buttons="handleCustomEvent(player, $event)" live muted stretch>
              </vf-player>
              <div class="video-close" v-show="player.url && player.bCloseShow" style="z-index: 2001;" v-on:click="closeVideo(index)">关闭</div>
              <div class="video-close channel-selector" v-show="!player.url && player.bCloseShow" v-on:click="selectChannel(index, player)">选择通道</div>
            </div>
            <el-dialog title="选择对应的设备进行播放" :visible.sync="dialogTableVisible" width="600px" @close="handleDialogClose" v-if="dialogTableVisible">
              <div class="device-search-wrap">
<!--                <div class="search-item">
                  <el-input v-model="deviceSearchName" placeholder="请输入设备名称进行搜索"></el-input>
                </div> -->
                <div class="search-item">
                  <el-radio-group v-model="deviceStatus">
                    <el-radio :label="item['value']" v-for="(item, index) in deviceStatusArr" :key="index">{{item['label']}}</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="device-list-wrap" style="height: 550px;overflow: auto;">
                <el-table :data="currentDevices" v-loading="listLoading" @row-click="deviceRowClick">
                  <el-table-column
                    :show-overflow-tooltip="true"
                    prop="name"
                    label="设备名称"
                    align="center"
                    >
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    prop="describe"
                    label="设备描述"
                    align="center"
                    >
                   <template slot-scope="scope">
                      {{ (scope['row']['describe'] && scope['row']['describe'] !== 'null') ? scope['row']['describe'] : '暂无描述' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="online"
                    align="center"
                    label="在线状态">
                    <template slot-scope="scope">
                      <el-link type="primary" v-if="scope['row']['online'] == 1">在线</el-link>
                      <el-link type="info" v-else>离线</el-link>
                     </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="device-pagination-wrap">
                <el-pagination
                  small
                  :current-page.sync="currentPage"
                  :page-size.sync="pageSize"
                  layout="prev, pager, next"
                  :total="total"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-dialog>
            <el-dialog
              v-if="dialogCodeVisible"
              title="播放地址对应的二维码"
              :visible.sync="dialogCodeVisible"
              width="400px">
              <div class="qr-code-wrap" id="qrcode">
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/static/js/jquery-3.6.0.js"></script>
    <script src="/static/js/jquery.qrcode.min.js" type="text/javascript"></script>
    <script src="/static/js/md5.js"></script>
    <script src="/static/player/vfplayer.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./main.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>
